import React from 'react'
import { Form, Button, Input, Toast } from 'antd-mobile'
import { useNavigate } from 'umi'
import { userLogin } from '@/api';
export default function index() {
  const navigate = useNavigate();
  const onFinish = (params: any) => {
    userLogin({
      ...params,
      deviceId: '23',
      deviceName:'dwdw'
    }).then(res=> {
      if (res.data.code === 0) {
        // 缓存用户状态 存储dva
        localStorage.setItem('token', res.data.data.token);
        localStorage.setItem('uid',  res.data.data.uid)
        Toast.show({
          content: '登录成功',
          afterClose: () => {
            navigate('/home', {
              replace: true
            })
          }
        }) 
      }
    })
  }
  return (
    <div>
      <Form
        name='form'
        onFinish={onFinish}
        footer={
          <>
            <Button block type='submit' color='primary' size='large'>
              提交
            </Button>
            <Button block type='reset' color='danger' size='large'>
              重置
            </Button>
            <Button block  onClick={
              () => {
                navigate('/reg')
              }
            }  size='large'>
              去注册页
            </Button>
          </>
        }
      >
        <Form.Item name='username' label='用户名' 
          rules={
            [
              { required: true, message: '用户名必填'},
              { pattern: /^\w{4,8}$/, message: '4-8位英文、数字、字母、下划线'}
            ]
          }>
          <Input placeholder='请输入姓名' />
        </Form.Item>
        <Form.Item name='pwd' label='密码' rules={[{ required: true }]}>
          <Input type="password" placeholder='请输入密码' />
        </Form.Item>
      </Form>
    </div>
  )
}
